<template>
  <view class="tab-bar">
    <block v-for="(item, index) in tabList" :key="index">
      <view
        class="tab-item"
        :class="{ active: props.selected === index }"
        @click="switchTab(index, item.pagePath)"
      >
        <image
          class="tab-icon"
          :src="props.selected === index ? item.selectedIconPath : item.iconPath"
        />
        <text class="tab-text">{{ item.text }}</text>
      </view>
    </block>
  </view>
</template>

<script setup>
import { ref ,defineEmits,defineProps, onMounted,onUnmounted} from 'vue';
let tabList= ref([
  {
    pagePath: "/pages/index/index",
    text: "首页",
    iconPath: "/static/tabbar/index.png",
    selectedIconPath: "/static/tabbar/index_active.png",
  }, 
  {
    pagePath: "/pages/supply/index",
    text: "供需大厅",
    iconPath: "/static/tabbar/supply.png",
    selectedIconPath: "/static/tabbar/supply_active.png",
  },
  {
    pagePath: "/pages/blacklist/index",
    text: "黑名单",
    iconPath: "/static/tabbar/blacklist.png",
    selectedIconPath: "/static/tabbar/blacklist_active.png",
  },
  {
    pagePath: "/pages/mine/index",
    text: "我的",
    iconPath: "/static/tabbar/mine.png",
    selectedIconPath: "/static/tabbar/mine_active.png",
  },
])
const props = defineProps({ 
  // num: {
  //   type: Number,
  //   default: 0,
  // },
  selected: {
    type: Number,
    default: 0,
  },
});
const emits = defineEmits(["changeIndex"]); // 子组件向父组件发送事件
const switchTab = (index, pagename) => {
  emits("changeIndex", index);
  // 跳转到对应的路由页面
  uni.switchTab({
    url: pagename,
  });
};



</script>

<style scoped>
.tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 112rpx;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #9ca3af;
  position: relative;
}
.tab-item.active {
  color: #0963fe;
}
.tab-icon {
  width: 28rpx;
  height: 28rpx;
}
.tab-text {
  font-size: 24rpx;
  margin-top: 8rpx;
}
.dot {
  position: absolute;
  top: -5px;
  right: 26px;
  background-color: red;
  font-size: 26rpx;
  border-radius: 20rpx;
  padding: 0 10rpx;
  color: #fff;
}
</style>